<template>
  <div class="finance-receivable">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户结算</el-breadcrumb-item>
        <el-breadcrumb-item>应收明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 查询条件 -->
    <el-card class="search-card">
      <div class="search-title">查询条件</div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="客户订单号：">
          <el-input v-model="searchForm.orderNo"></el-input>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input v-model="searchForm.customerName">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="签收日期：">
          <el-date-picker
            v-model="searchForm.signDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <span class="date-separator">-</span>
          <el-date-picker
            v-model="searchForm.signDateEnd"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查 询</el-button>
          <el-button @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 应收明细 -->
    <el-card class="table-card">
      <div class="table-operations">
        <div class="left-operations">
          <el-checkbox v-model="generateBill">生成对账单</el-checkbox>
          <el-button icon="el-icon-refresh">刷新</el-button>
          <el-button icon="el-icon-download">下载</el-button>
        </div>
        <div class="tabs">
          <el-radio-group v-model="activeTab">
            <el-radio-button label="未提交"></el-radio-button>
            <el-radio-button label="已提交"></el-radio-button>
            <el-radio-button label="全部"></el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderNo" label="订单编号"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column prop="signTime" label="签收时间"></el-table-column>
        <el-table-column prop="totalVolume" label="总体积"></el-table-column>
        <el-table-column prop="totalWeight" label="总重量"></el-table-column>
        <el-table-column prop="transportFee" label="运费总计"></el-table-column>
        <el-table-column prop="otherFee" label="费用合计"></el-table-column>
        <el-table-column prop="prepayment" label="预付款"></el-table-column>
        <el-table-column prop="collectAmount" label="代收金额"></el-table-column>
        <el-table-column prop="receivableAmount" label="应收总计"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleManage(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <span class="pagination-info">当前第1/50页，每页15条，共500条记录</span>
        <div class="pagination-buttons">
          <el-button size="small">首页</el-button>
          <el-button size="small">上一页</el-button>
          <el-button size="small">下一页</el-button>
          <el-button size="small">尾页</el-button>
          <el-input size="small" v-model="currentPage" style="width: 50px"></el-input>
          <el-button type="primary" size="small">跳转</el-button>
        </div>
      </div>
    </el-card>

    <!-- 在template最后添加弹窗组件 -->
    <el-dialog title="对账明细" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
      <div class="settlement-detail">
        <!-- 基本信息 -->
        <div class="section">
          <div class="section-title">基本信息</div>
          <el-form :model="detailForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="订单编号：">
                  <el-input v-model="detailForm.orderNo" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户订单编号：">
                  <el-input v-model="detailForm.customerOrderNo" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户名称：">
                  <el-input v-model="detailForm.customerName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户签收日期：">
                  <el-date-picker
                    v-model="detailForm.signDate"
                    type="date"
                    disabled
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!-- 结算信息 -->
        <div class="section">
          <div class="section-title">结算信息</div>
          <el-form :model="detailForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="运费单价：">
                  <el-input v-model="detailForm.unitPrice">
                    <template slot="append">元/千克</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运费单价：">
                  <el-input v-model="detailForm.volumePrice">
                    <template slot="append">元/立方米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运费合计：">
                  <el-input v-model="detailForm.transportFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="提货费：">
                  <el-input v-model="detailForm.pickupFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="装卸费：">
                  <el-input v-model="detailForm.handlingFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="包装费：">
                  <el-input v-model="detailForm.packagingFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="保险费：">
                  <el-input v-model="detailForm.insuranceFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="中转费：">
                  <el-input v-model="detailForm.transferFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="费用合计：">
                  <el-input v-model="detailForm.totalFee">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 其他费用 -->
            <div class="sub-section">
              <div class="sub-title">其他费用</div>
              <el-table :data="detailForm.otherFees" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="费用类型">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" placeholder="请选择">
                      <el-option label="误工费" value="误工费"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="发生日期">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.date"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%">
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="金额">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.amount"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <div class="table-operations">
                <el-button type="primary" size="small" @click="handleAddOtherFee">新增</el-button>
                <el-button type="danger" size="small" @click="handleDeleteOtherFee">删除</el-button>
              </div>
            </div>

            <!-- 赔偿金额 -->
            <div class="sub-section">
              <div class="sub-title">赔偿金额</div>
              <el-table :data="detailForm.compensations" border style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="异常单">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.exceptionNo">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column label="发生日期">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.date"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%">
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="金额">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.amount"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <div class="table-operations">
                <el-button type="primary" size="small" @click="handleAddCompensation">新增</el-button>
                <el-button type="danger" size="small" @click="handleDeleteCompensation">删除</el-button>
              </div>
            </div>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="应收总计：">
                  <el-input v-model="detailForm.totalReceivable" disabled>
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预付款：">
                  <el-input v-model="detailForm.prepayment">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="代收金额：">
                  <el-input v-model="detailForm.collectAmount">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="结算方式：">
              <el-radio-group v-model="detailForm.settlementType">
                <el-radio label="到货现结">到货现结</el-radio>
                <el-radio label="月结">月结</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="银行账户信息：">
              <el-input type="textarea" v-model="detailForm.bankInfo" :rows="3"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave">保 存</el-button>
        <el-button type="success" @click="handleConfirm">确 认</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FinanceReceivable',
  data() {
    return {
      searchForm: {
        orderNo: '',
        customerName: '',
        signDate: '',
        signDateEnd: ''
      },
      generateBill: false,
      activeTab: '未提交',
      currentPage: 1,
      tableData: [{
        orderNo: '0990900',
        customerName: '上海亚源',
        signTime: '2015-07-30 20:24:10',
        totalVolume: '90.00',
        totalWeight: '39.00',
        transportFee: '90.00',
        otherFee: '39.00',
        prepayment: '90.00',
        collectAmount: '39.00',
        receivableAmount: '39.00'
      }],
      dialogVisible: false,
      detailForm: {
        orderNo: 'T201606181',
        customerOrderNo: 'AB001001',
        customerName: '2005 上海超人电器有限公司',
        signDate: '2016-06-18',
        unitPrice: '0.00',
        volumePrice: '0.00',
        transportFee: '0.00',
        pickupFee: '0.00',
        handlingFee: '0.00',
        packagingFee: '0.00',
        insuranceFee: '0.00',
        transferFee: '0.00',
        totalFee: '0.00',
        otherFees: [{
          type: '误工费',
          date: '2016-06-18',
          amount: '220.00'
        }],
        compensations: [{
          exceptionNo: '333434455',
          date: '2016-06-18',
          amount: '220.00'
        }],
        totalReceivable: '0.00',
        prepayment: '0.00',
        collectAmount: '0.00',
        settlementType: '月结',
        bankInfo: '收款单位：上海超人电器有限公司\n开户行：中国交通银行徐汇支行\n账户：989999892348392432'
      }
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索条件：', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        orderNo: '',
        customerName: '',
        signDate: '',
        signDateEnd: ''
      }
    },
    handleManage(row) {
      this.dialogVisible = true
      // 实际应用中这里需要根据row的数据获取详细信息
    },
    handleAddOtherFee() {
      // 实现新增其他费用的逻辑
    },
    handleDeleteOtherFee() {
      // 实现删除其他费用的逻辑
    },
    handleAddCompensation() {
      // 实现新增赔偿金额的逻辑
    },
    handleDeleteCompensation() {
      // 实现删除赔偿金额的逻辑
    },
    handleSave() {
      // 实现保存对账单的逻辑
    },
    handleConfirm() {
      // 实现确认对账单的逻辑
    }
  }
}
</script>

<style scoped>
.finance-receivable {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-operations {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 0;
  margin-bottom: 10px;
}
</style> 